<template>
  <div class="magiccube" :style="{
    'padding-left': datas.pageMargin + 'px',
    'padding-right': datas.pageMargin + 'px',
  }">
    <img draggable="false" v-show="!showimageList" src="../../../assets/images/mor.png" alt="" style="width: 100%" />

    <!-- 一行二个 -->
    <section class="buju buju0" v-show="datas.rubiksCubeType === 0 && showimageList">
      <div v-for="index in 2" :key="index" class="rubiksCubeType0 rubiksCubeType">
        <img draggable="false" :src="datas.imageList[index - 1].src" alt=""
          :style="{ padding: datas.imgMargin / 2 + 'px' }" />
      </div>
    </section>

    <!-- 一行三个 -->
    <section class="buju buju0" v-show="datas.rubiksCubeType === 1 && showimageList">
      <div v-for="index in 3" :key="index" class="rubiksCubeType1 rubiksCubeType" :style="{
        margin: datas.imgMargin / 10 + '%',
        width: 33.33 + '%',
      }">
        <!--    width: 33 - datas.imgMargin / 10 + '%', -->
        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
      </div>
    </section>

    <!-- 一行四个 -->
    <section class="buju buju0" v-show="datas.rubiksCubeType === 2 && showimageList">
      <div v-for="index in 4" :key="index" class="rubiksCubeType2 rubiksCubeType" :style="{
        margin: datas.imgMargin / 10 + '%',
        width: 25 - datas.imgMargin / 10 + '%',
      }">
        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
      </div>
    </section>

    <!-- 二左二右 -->
    <section class="buju buju0" v-show="datas.rubiksCubeType === 3 && showimageList">
      <div v-for="index in 4" :key="index" class="rubiksCubeType3 rubiksCubeType">
        <img draggable="false" :src="datas.imageList[index - 1].src" alt=""
          :style="{ padding: datas.imgMargin + 'px' }" />
      </div>
    </section>

    <!-- 一左二右 -->
    <section class="buju buju4" v-show="datas.rubiksCubeType === 4 && showimageList">
      <div class="rubiksCubeType hw" style="padding-top: 100%">
        <img draggable="false" :src="datas.imageList[0].src" alt="" style="height:300px"
          :style="{ 'padding-right': datas.imgMargin + 'px' }" />
      </div>
      <div style="display: inline-flex; flex-direction: column; width: 100%">
        <div class=" hw imgone" v-for="index in 2" :key="index" style="padding-top: 150px;height:150px">
          <img draggable="false" :src="datas.imageList[index].src" alt="" style="height:150px"
            :style="{ padding: datas.imgMargin + 'px' }" />
        </div>
      </div>
    </section>

    <!-- 一上二下 -->
    <section class="buju buju5" v-show="datas.rubiksCubeType === 5 && showimageList">
      <div class="rubiksCubeType hw" style="display: block; padding-top: 50%">
        <img draggable="false" :src="datas.imageList[0].src" alt=""
          :style="{ 'padding-bottom': datas.imgMargin + 'px' }" />
      </div>
      <div style="display: flex; width: 100%">
        <div class="rubiksCubeType hw imgtow" v-for="index in 2" :key="index" style="padding-top: 50%">
          <img draggable="false" :src="datas.imageList[index].src" alt="" :style="{ padding: datas.imgMargin + 'px' }" />
        </div>
      </div>
    </section>

    <!-- 一左三右 -->
    <section class="buju buju4" v-show="datas.rubiksCubeType === 6 && showimageList">
      <!-- 第一张图片 -->
      <div class="rubiksCubeType hw" style="padding-top: 100%">
        <img draggable="false" :src="datas.imageList[0].src" alt="" style="height:300px"
          :style="{ 'padding-right': datas.imgMargin + 'px' }" />
      </div>
      <div style="display: inline-flex; flex-direction: column; width: 100%">
        <!-- 第二张图片 -->
        <div class="rubiksCubeType hw" style="padding-top: 150px">
          <img draggable="false" :src="datas.imageList[1].src" alt="" :style="{
            'padding-bottom': datas.imgMargin + 'px',
            'padding-left': datas.imgMargin + 'px',
          }" />
        </div>
        <div class="rubiksCubeType">
          <div class="hw" style="
              display: inline-flex;
              justify-content: center;
              align-items: center;
              padding-top: 150px;
            " v-for="index in 2" :key="index">
            <img draggable="false" :src="datas.imageList[index + 1].src" alt="" style="height:150px" :style="{
              'padding-left': datas.imgMargin + 'px',
              'padding-top': datas.imgMargin + 'px',
            }" />
          </div>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'magiccube',
  props: {
    datas: Object,
  },
  computed: {
    showimageList() {
      if (
        this.datas.rubiksCubeType === 0 &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src
      )
        return false

      if (
        (this.datas.rubiksCubeType === 1 ||
          this.datas.rubiksCubeType === 4 ||
          this.datas.rubiksCubeType === 5) &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src
      )
        return false

      if (
        (this.datas.rubiksCubeType === 2 ||
          this.datas.rubiksCubeType === 6 ||
          this.datas.rubiksCubeType === 3) &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src &&
        !this.datas.imageList[3].src
      )
        return false

      return true
    },
  },
}
</script>

<style scoped lang="less">
.magiccube {
  position: relative;

  /* 布局 */
  .imgone {
    &:last-of-type {
      img {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
      }
    }

    &:first-of-type {
      img {
        padding-top: 0 !important;
        padding-right: 0 !important;
      }
    }
  }

  .imgtow {
    &:first-of-type {
      img {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
      }
    }

    &:last-of-type {
      img {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
      }
    }
  }

  .hw {
    width: 100%;
    position: relative;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .buju {
    &.buju0 {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    &.buju4 {
      display: flex;
      width: 100%;
      height: 300px;
      flex-direction: row;
      justify-content: space-around;
    }

    .active {
      background: #e0edff;
      border: 1px solid @primary-color;
      color: @primary-color;
      z-index: 2;
    }

    .rubiksCubeType {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &.rubiksCubeType0 {
        width: 50%;

        // height: 200px;
        &:first-of-type {
          img {
            padding-left: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
        }

        &:last-of-type {
          img {
            padding-right: 0 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
        }

        img {
          width: 100%;
          // height: 200px;
          display: block;
        }
      }

      &.rubiksCubeType1 {
        width: 33.333%;

        &:nth-of-type(1) {
          margin-left: 0 !important;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        &:nth-of-type(2) {
          margin-top: 0 !important;
          margin-left: 0 !important;
          margin-bottom: 0 !important;
        }

        &:nth-of-type(3) {
          margin-top: 0 !important;
          margin-right: 0 !important;
          margin-bottom: 0 !important;
        }

        img {
          width: 100%;
          height: 150px;
          display: block;
        }
      }

      &.rubiksCubeType2 {
        width: 25%;

        &:nth-of-type(1) {
          margin-left: 0 !important;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        &:nth-of-type(2) {
          margin-top: 0 !important;
          margin-left: 0 !important;
          margin-bottom: 0 !important;
        }

        &:nth-of-type(3) {
          margin-top: 0 !important;
          margin-left: 0 !important;
          margin-bottom: 0 !important;
        }

        &:nth-of-type(4) {
          margin-top: 0 !important;
          margin-right: 0 !important;
          margin-bottom: 0 !important;
        }

        img {
          width: 100%;
          height: 150px;
          display: block;
        }
      }

      &.rubiksCubeType3 {
        width: 50%;
        padding-top: 50%;
        position: relative;

        &:nth-of-type(1) {
          img {
            padding-top: 0 !important;
            padding-left: 0 !important;
          }
        }

        &:nth-of-type(2) {
          img {
            padding-top: 0 !important;
            padding-right: 0 !important;
          }
        }

        &:nth-of-type(3) {
          img {
            padding-bottom: 0 !important;
            padding-left: 0 !important;
          }
        }

        &:nth-of-type(4) {
          img {
            padding-bottom: 0 !important;
            padding-right: 0 !important;
          }
        }

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      &.rubiksCubeType4 {
        width: 187px;
        height: 187px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}
</style>
